import React, { Component } from 'react'
import Footer from '../components/Footer'
import ShoppingList from '../components/ShoppingList'
import Header from '../components/Header'
import shopping from '../css/shopping.module.css'

export default class Shopping extends Component {
    constructor () {
        super();
        this.state = {
            checkedAll: true,
            list: [
                { id: 1, goodsname: "商品一", goodsprice: 100, goodsnum: 10, checked: true },
                { id: 2, goodsname: "商品二", goodsprice: 200, goodsnum: 1, checked: true },
                { id: 3, goodsname: "商品三", goodsprice: 200, goodsnum: 1, checked: true }
            ]
        }
    }
    num = (item, num) => {
        this.setState({
            list: this.state.list.map(obj => {
                if (item.id === obj.id) {
                    obj.goodsnum = obj.goodsnum + num
                    if (obj.goodsnum < 1) {
                        obj.goodsnum = 1
                    }
                }
                return obj
            })
        })
    }
    changeNum = (value, item) => {
        if (value < 1 || isNaN(value)) {
            value = 1
        }
        this.setState({
            list: this.state.list.map(obj => {
                if (item.id === obj.id) {
                    return { ...obj, goodsnum: value }
                } else {
                    return obj
                }
            })
        })
    }
    changeChecked = (item) => {
        this.setState({
            list: this.state.list.map(obj => {
                if (item.id === obj.id) {
                    return { ...obj, checked: !obj.checked }
                } else {
                    return obj
                }
            })
        }, () => {
            if (this.state.list.every(item => item.checked)) {
                this.setState({
                    checkedAll: true
                })
            } else {
                this.setState({
                    checkedAll: false
                })
            }
        })
    }
    changeCheckedAll = () => {
        this.setState({
            checkedAll: !this.state.checkedAll,
            list: this.state.list.map(obj => {
                return { ...obj, checked: !this.state.checkedAll }
            })
        })
    }

    detele = (id) => {
        this.setState({
            list: this.state.list.filter(item => item.id !== id)
        })
    }
    render() {
        let price = 0;
        let num = 0;
        let checkedList = this.state.list.filter(item => item.checked);
        if (checkedList.length) {
            price = checkedList.map(item => item.goodsnum * item.goodsprice).reduce((a, b) => a + b);
            num = checkedList.map(item => item.goodsnum).reduce((a, b) => a + b);
        }
        return (
            <div>
                <table className={shopping.table} cellPadding='0' cellSpacing='0' border='1px solid #000'>
                    <Header list={this.state.list} changeCheckedAll={this.changeCheckedAll} checkedAll={this.state.checkedAll}></Header>
                    <tbody>
                        <ShoppingList list={this.state.list} num={this.num} changeNum={this.changeNum} changeChecked={this.changeChecked} detele={this.detele}></ShoppingList>
                        <Footer price={price} num={num}></Footer>
                    </tbody>
                </table>
            </div>

        )
    }
   
}